<template>
  <div class="ztfp">
    <Calendar type="ztfp" :defaultDate="defaultDate" @updateDate="updateDate" />
    <atom-tabs @click="handleClick" class="tabs">
      <atom-tab v-for="(tab, index) in component" :key="index" :title="tab"></atom-tab>
    </atom-tabs>
    <keep-alive>
      <component v-bind:is="currentTabComponent" class="content" @setDefaultDate="setDefaultDate" :nowDate="nowDate" />
    </keep-alive>
  </div>
</template>

<script>
import Calendar from '@/components/common/Calendar.vue';
import Lbtt from '@/components/Ztfp/Lbtt/index.vue';
import Rdfp from '@/components/Ztfp/Rdfp/index.vue';
import Qqsg from '@/components/Ztfp/Qqsg/index.vue';
import Lsxg from '@/components/Ztfp/Lsxg/index.vue';
import Zbc from '@/components/Ztfp/Zbc/index.vue';
import Dtc from '@/components/Ztfp/Dtc/index.vue';
import Xgc from '@/components/Ztfp/Xgc/index.vue';
import { formatDate } from '@/scripts/tools.js';

export default {
  name: 'Ztfp',
  components: {
    Calendar,
    Lbtt,
    Rdfp,
    Qqsg,
    Lsxg,
    Zbc,
    Dtc,
    Xgc,
  },
  data() {
    return {
      currentTabComponent: 'Lbtt',
      component: {
        Lbtt: '连板天梯',
        Rdfp: '热点复盘',
        Qqsg: '强趋势股',
        Lsxg: '历史新高',
        Xgc: '新股池',
        Zbc: '炸板池',
        Dtc: '跌停池',
      },
      // 日历组件所需时间
      defaultDate: '',
      // 子组件所需时间
      nowDate: '',
    };
  },
  methods: {
    handleClick(index) {
      this.currentTabComponent = Object.keys(this.component)[index];
    },
    updateDate({ date, defaultDate }) {
      this.defaultDate = defaultDate;
      this.nowDate = date;
    },
    // 连板天梯组件接口获取最新时间
    setDefaultDate(date) {
      const formattedDate = formatDate(date + '', '-');
      // 日历组件所需标准时间格式
      this.defaultDate = new Date(formattedDate);
      // 子组件所需的yyyymmdd格式
      this.nowDate = date;
    },
  },
};
</script>

<style lang="less" scoped>
.ztfp {
  height: 100%;
}
.tabs {
  /deep/ .atom-tabs__wrap {
    height: 72px;
    span {
      font-size: 28px;
    }
    .atom-tabs__overlay {
      height: 100%;
    }
  }
}
.content {
  overflow: scroll;
}
/deep/ .atom-calendar-entry__entry {
  height: 96px;
  background-color: #ffffff;
  padding: 0 32px;
}
</style>
